<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-card class="box-card">
    <div>
      <el-row>
        <el-col :span="12">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="12">
          <el-button icon="el-icon-search" type="primary">搜索</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 图片卡片 -->
    <template>
      <div class="PhotoSet" v-for="(item, index) in tableData" :key="index">
        <img :src="item.url" class="image" />
        <div class="pp">
          <div>菜名：{{ item.name }}</div>
          <div>描述：{{ item.xinxi }}</div>
          <div>价格：{{ item.price }}</div>
          <div>
            <el-button
              class="button"
              type="primary"
              size="mini"
              plain
              @click="LookMore(index)"
              >查看更多</el-button
            >
          </div>
        </div>
      </div>
    </template>
  </el-card>
</template>
    
    <script>
export default {
  created() {},
  data() {
    return {
      input: "",
      tableData: [
        {
          url: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name: "汉堡包",
          xinxi: "好吃味道足",
          price: "￥21",
        },
        {
          url: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name: "汉堡包",
          xinxi: "好吃味道足",
          price: "￥21",
        },
        {
          url: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name: "汉堡包",
          xinxi: "好吃味道足",
          price: "￥21",
        },
        {
          url: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name: "汉堡包",
          xinxi: "好吃味道足",
          price: "￥21",
        },
        {
          url: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name: "汉堡包",
          xinxi: "好吃味道足",
          price: "￥21",
        },
        {
          url: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name: "汉堡包",
          xinxi: "好吃味道足",
          price: "￥21",
        },
        {
          url: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name: "汉堡包",
          xinxi: "好吃味道足",
          price: "￥21",
        },
        {
          url: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name: "汉堡包",
          xinxi: "好吃味道足",
          price: "￥21",
        },
      ],
    };
  },
  methods: {
    LookMore(val) {
      console.log(val);
      console.log(888);
      this.$router.push("/CaiMore");
    },
  },
};
</script>
    
<style scoped slot="less">
.el-input {
  display: inline-block;
}
/* 图片卡片 */

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.PhotoSet {
  background-color: rgb(241, 241, 241);
  display: inline-block;
  padding-top: 30px;
  border-radius: 20px;
  box-shadow: 3px 6px rgba(168, 166, 166, 0.6);
  margin: 50px 60px;
  height: 100%;
  width: 25%;
}
.pp {
  text-align: center;
  padding: 10px;
}
.button {
  margin-top: 10px;
  padding: 10px;
  font-size: 17px;
}

.image {
  width: 80%;
  margin-left: 10%;
  display: block;
}
</style>
    